<template>
  <div class="page-layout">
    <div class="page-layout-content">
      <div class="page-layout-goodsbox" v-if="dataList.length > 0">
        <div class="page-layout-goodsitem" v-for="(item, index) in dataList" :key="index">
          <good-item :data="item" @onEmit="onEmit"></good-item>
        </div> 
      </div>
      <pk-empty desc="暂时没有面试记录" v-if="dataList.length < 1"></pk-empty>
      <div class="page-layout-footer"  v-if="dataList.length > 0">
        <pk-page :total="total" @onSize="onSize" :pageSize="12"></pk-page>
      </div>
    </div>
  </div>
</template>

<script setup>
import goodItem from './component/item.vue'
import { invitationGetPageList } from '@/api/api'
import { ref, reactive, onMounted, watch } from 'vue'
import { getTimeYearStr } from '@/utils/utils'
import pkEmpty from '@/components/pkui/pkempty/pkempty.vue'
import pkPage from '@/components/pkui/pkpage/pkpage.vue'
const dataList = ref([])
const page = ref(1)
const total = ref(0)

const getList = () => {
  invitationGetPageList({
    page: page.value
  }).then(res => {
    total.value = res.data.total
    dataList.value = res.data.list.map(item => {
      return {
        ...item,
        time: getTimeYearStr(item.deadline)
      }
    })
  })
}

const onEmit = () => {
  getList()
}

const onSize = (e) => {
  page.value = e
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.page-layout{
  padding-top: 50px;
  font-size: 14px;
  // background: #fff;
  height: 100%;
  &-content{
    width: 996px;
    margin: 24px auto;
  }
  &-goodsbox{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  &-goodsitem{
    width: 240px;
    margin-right: 12px;
    margin-bottom: 12px;
    flex: 0 0 auto;
  }
  &-goodsitem:nth-child(4n) {
    margin-right: 0!important;
  }
  &-footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
</style>